<template>
  <div>
    <!-- <h2>修改管理员信息界面</h2>
    <el-divider></el-divider> -->

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="管理员头像" prop="img">
        <el-upload class="avatar-uploader" action :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="手机号" prop="shoujihao">
        <el-input v-model="ruleForm.shoujihao" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="mima">
        <el-input type="password" v-model="ruleForm.mima"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass"></el-input>
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item prop="youxiang" label="邮箱">
        <el-input v-model="ruleForm.youxiang"></el-input>
      </el-form-item>
      <!-- 生日 -->
      <el-form-item label="出生日期">
        <div class="block">
          <el-date-picker v-model="ruleForm.shengri" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
      </el-form-item>
      <!-- 性别选项 -->
      <el-form-item label="性别">
        <template>
          <el-radio class="sex" v-model="ruleForm.xingbie" label="男">男
          </el-radio>
          <el-radio v-model="ruleForm.xingbie" label="女">女</el-radio>
        </template>
      </el-form-item>
      <h4 style="margin: 40px 0 20px 100px">为管理人员设置权限</h4>
      <el-checkbox-group class="el-group" v-model="checkList">
        <el-checkbox label="可查看商品列表"></el-checkbox><br />
        <el-checkbox label="可操作新增商品列表"></el-checkbox><br />
        <el-checkbox label="可操作修改个人信息界面"></el-checkbox><br />
        <el-checkbox label="可添加后台管理员功能"></el-checkbox><br />
      </el-checkbox-group>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">修改管理员</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/myaxios";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.mima) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      checkList: [], //权限
      id: this.$route.params.id,
      ruleForm: {
        img: "", //上传的头像
        shengri: "", //出生日期
        xingbie: "", //性别
        youxiang: "", //管理员邮箱
        mima: "", //管理员的登录密码
        checkPass: "", //管理员的登录确认密码
        shoujihao: "", //手机号
      },
      rules: {
        // actorAvatar: [{ required: true, message: "必填", trigger: "blur" }],
        img: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        youxiang: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "邮箱地址有误", trigger: ["blur"] },
        ],
        // shoujihao: [
        //   { required: true, message: "手机号不能为空", trigger: "blur" },
        //   {
        //     pattern:
        //       /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
        //     message: "请填写正确的手机号",
        //     trigger: "blur",
        //   },
        // ],
        mima: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "6~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, message: "请再次输入用户密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  //   方法
  methods: {
    /** 上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.img = res.data;
    },

    /** 上传之前完成图片格式的验证 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 修改当前管理员的信息
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let params = this.ruleForm;
          httpApi.BackUser.updateById(params).then((res) => {
            console.log("666修改", res);
            if (res.status == 200) {
              this.$message.success("恭喜，修改成功");
              this.$router.push("/home/administrator-list");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 通过id查询管理员信息
    cha() {
      let params = this.id;
      console.log(params);
      httpApi.BackUser.queryById({ id: params }).then((res) => {
        console.log("6666", res);
        this.ruleForm = res.data[0];
      });
    },
    resetForm(ruleForm) {
      // 重置清空表单
      this.$refs[ruleForm].resetFields();
      this.checkList = [];
      this.shengri = "";
    },
  },
  //挂载执行
  mounted() {
    this.cha();
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  display: block;
}

.el-input__inner {
  width: 280px;
}

.sex {
  margin-left: 30px;
}

.el-group {
  margin: 0 0 20px 100px;
  font-size: 30px;
}
</style>
